<!--调研区县配置表-->
<template>
  <div class="app-container">
    <div class="container-menu">
      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
    </div>
    <div class="table-container">
      <vxe-table ref="tableRef" :row-config="rowConfig" :data="tableData" :seq-config="seqConfig" @row-dragend="rowDragendEvent">
        <vxe-column field="role" title="排序" drag-sort width="50"></vxe-column>
        <vxe-column type="seq" title="序号" width="50" align="center"></vxe-column>
        <vxe-column field="companyName" title="调研对象" min-width="160" show-overflow="title"></vxe-column>
        <vxe-column field="grassrootsContactName" title="调研区县" min-width="160" show-overflow="title"></vxe-column>
        <vxe-column
          field="whetherEnable"
          title="是否启用"
          width="80"
          align="center"
          :formatter="formatterWhetherEnable"
        ></vxe-column>
        <vxe-column field="action" title="操作" width="150" align="center">
          <template #default="{ row }">
            <vxe-button mode="text" status="primary" @click="editDetails(row)">编辑</vxe-button>
            <vxe-button mode="text" status="primary" @click="deletePageData({ id: row.id, ids: [row.id] })">删除</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
        background
        :current-page="pageNumber"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper, total"
        :total="total"
        @current-change="pageChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
    <!--新增弹窗-->
    <el-dialog :title="formType === NEWLY_ADDED.type ? NEWLY_ADDED.title : EDIT.title" :visible.sync="dialogFormVisible">
      <jdf-increased-form
        ref="increaseForm"
        :configs="configs"
        :data="formData"
        :formAttrs="formAttrs"
        :all-fields-readonly="allFieldsReadonly"
        :rules="rules"
        @select="selectOrg"
      ></jdf-increased-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFormData(formData)">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResearchFormService from '@/api/domains/ResearchFormService';
import { getStorageInfo } from '@/api/utils/storage-util';
import { showErrorMsg } from '@/api/utils/pc-message';
import processFormCommonMixin from '@/views/procecss-form/processFormCommonMixin';
import { first } from 'lodash-es';
import { PROVINCE_CODE, WHETHER_ENABLE } from '@/utils/constants.js';
const { DISABLED_TITLE, ENABLED_TITLE, ENABLED, DISABLED } = WHETHER_ENABLE;
const {
  getGrassrootsPage,
  delGrassrootsRemove,
  updGrassrootsUpdate,
  addGrassrootsSave,
  updateGrassroots,
  grassrootsUpdateOrder,
} = new ResearchFormService();
import listTableMixins from '@/mixins/listTableMixins';
import configManagementMixins from '@/mixins/configManagementMixins.js';
export default {
  mixins: [processFormCommonMixin, listTableMixins, configManagementMixins],
  data() {
    return {
      //获取表格数据
      getTable: getGrassrootsPage,
      //删除表格数据
      deleteList: delGrassrootsRemove,
      //更新表格数据
      updateList: updGrassrootsUpdate,
      //新增表格数据
      addList: addGrassrootsSave,
      //排序表格
      sortList: grassrootsUpdateOrder,
      //表单数据
      formData: {
        sort: '', //序号
        whetherEnable: ENABLED, //是否启用
        companyCode: '', //部门编号
        companyName: '', //部门名称
        grassrootsContactName: '', //调研区县
      },
      //表单验证规则
      rules: {
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        companyName: [{ required: true, message: '请输入调研对象', trigger: 'blur' }],
        grassrootsContactName: [{ required: true, message: '请输入调研区县', trigger: 'blur' }],
      },
      //表单配置项
      configs: [
        [
          {
            formElName: '调研对象',
            formElCode: 'companyName',
            editable: '1',
            colSpan: 24,
            elType: 'personOrOrg',
            visibleField: 'groupOrgTreeVisible',
            treeAttrs: {
              groupCode: getStorageInfo('region') === PROVINCE_CODE ? 'DY_COMPANIES_FORM' : 'DY_HOT_DEPT', //调研对象字典
              identityId: getStorageInfo('identityId'),
              dialogTitle: '调研对象', //弹窗标题
              echoField: 'departmentInCharge', //会显到input的字段
              lazy: true, //是否懒加载
            },
            attrs: {
              placeholder: '请选择调研对象',
            },
          },
        ],
        [
          {
            formElName: '调研区县',
            formElCode: 'grassrootsContactName',
            editable: '1',
            colSpan: 24,
            attrs: {
              placeholder: '请输入调研区县',
            },
          },
        ],
        [
          {
            formElName: '是否启用',
            formElCode: 'whetherEnable',
            editable: '1',
            colSpan: 24,
            elType: 'select',
            attrs: {
              clearable: false,
            },
            options: [
              {
                label: '是',
                value: ENABLED,
              },
              {
                label: '否',
                value: DISABLED,
              },
            ],
          },
        ],
        [
          {
            formElName: '排序',
            formElCode: 'sort',
            editable: '1',
            elType: 'number',
            colSpan: 24,
            attrs: {
              placeholder: '请输入排序',
            },
          },
        ],
      ],
    };
  },

  methods: {
    /**
     * 调研对象
     * @param datas 选中的数据
     * @param echoField 回显字段
     */
    selectOrg(datas, echoField) {
      if (echoField === 'departmentInCharge') {
        //如果调研对象弹窗不做选择，这里first(datas)会是undefined
        const { name, id } = first(datas) || {};
        Object.assign(this.formData, {
          companyName: name,
          companyCode: id,
        });
      }
    },

    /**
     * 获取详情
     * @param id 详情的id
     */
    async getDeetsConfigDetail({ id }) {
      try {
        const {
          data: { data },
        } = await updateGrassroots({ id });
        this.formData = {
          ...data,
          whetherEnable: data.whetherEnable ? ENABLED : DISABLED,
          questionOptionConfigDTOS: data.questionOptionConfigVOS,
        };
      } catch (error) {
        showErrorMsg(error);
      }
    },

    /**
     * 重置表单
     */
    resetForm() {
      //默认表单数据
      const resetData = {
        //id
        id: '',
        //序号
        sort: '',
        //是否启用
        whetherEnable: ENABLED,
        //部门编号
        companyCode: '',
        //部门名称
        companyName: '',
        //调研区县
        grassrootsContactName: '',
      };
      Object.assign(this.formData, resetData);
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/style/configManagement.scss';
</style>
